<template>
	<view class="container">
		<u-navbar title="详情" bgColor="rgba(255,255,255,1)" leftIconColor="#000"
			titleStyle="color:#000;font-weight: bold;"></u-navbar>
		<view class="detail" :style="{ position: 'absolute', top: sHeight }">
			<view class="detail-content">
				<!-- <u-parse :content="content" ></u-parse> -->
				<mp-html
					:content="content" 
					:tag-style="{
					  div: 'white-space: pre-wrap;',
					  span: 'white-space: pre-wrap;',
					  p: 'white-space: pre-wrap;',
					  img: 'margin:0;width:100%;max-width: 100%;'
					}" 
				/>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getCurrentInstance,
		onMounted,
		ref,
		computed
	} from 'vue';
	import {
		onLoad,
		onUnload,
		onShow
	} from "@dcloudio/uni-app"
	const {
		proxy
	} = getCurrentInstance()
	const sHeight = ref('')
	const detailId = ref('')
	const content = ref('')
	const pageTitle = ref('')

	onLoad((options)=>{
		console.log('轮播图字符串',options.content)
		content.value = JSON.parse(decodeURIComponent(options.query)).content
		getStatusHeight();
	})
	// 计算距离顶部安全高度
	function getStatusHeight() {
		sHeight.value = uni.getSystemInfoSync().statusBarHeight + 44 + 'px';
	}
</script>

<style lang="scss">
	.container {
		border-top: 1rpx solid #f4f4f4;
		width: 100%;
		background-color: #fff;

		.detail {
			width: calc(100vw - 40rpx);
			box-sizing: border-box;
			margin-left: 20rpx;

			&-title {
				.info {
					margin-left: 28rpx;

					&>text:first-child {
						@include str(36rpx, bold, #333);
						line-height: 50rpx;
					}

					&>text:last-child {
						@include str(26rpx, 500, #999);
						line-height: 37rpx;
					}
				}
			}

			&-content {
				word-wrap: break-word;
				margin-top: 30rpx;

				text {
					@include str(28rpx, 400, #666666);
					letter-spacing: 2rpx;
				}
			}

			&-footer {
				margin-top: 60rpx;

				text {
					margin-top: 5rpx;
					@include str(28rpx, 400, #999999);
				}
			}
		}

		.bottom_btn {
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 12rpx 30rpx;
			box-shadow: 0rpx -3rpx 20rpx rgba(0, 0, 0, 0.06);
			z-index: 999;

			.addCar {
				width: 100%;
				line-height: 74rpx;
				background: $uni-color-primary;
				border-radius: 37rpx;
				@include str(32rpx, 500, #fff);
			}
		}
	}
</style>